<template>
  <div style="border: 1px solid #ccc; width: 1000px;">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="min-height: 1px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
    />
  </div>
  <br>
  <n-button
      style="width: 64px;"
  >
    重置
  </n-button>
  &nbsp;
  <n-button
      style="width: 64px;"
      type="info"
      @click="handleClick"
  >
    保存
  </n-button>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'


export default {
  components: { Editor, Toolbar },
  setup() {
    const message = window.$message;

    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref('<p>中信银行成立于1987年，是中国改革开放中最早成立的新兴商业银行之一，是中国最早参与国内外金融市场融资的商业银行，并以屡创中国现代金融史上多个第一而蜚声海内外，为中国经济建设做出了积极的贡献。\n' +
        '\n' +
        '2007年4月，中信银行实现在上海证券交易所和香港联交所“A+H”同步上市；2009年，中信银行成功收购中信国际金融控股有限公司，控股中信银行（国际）有限公司。2015年4月，中信银行英国伦敦代表处开业；7月，中信银行悉尼代表处进入筹备阶段，标志着中信银行新一轮国际化战略正式启动。2015年6月，中信银行入股台湾中国信托金融控股股份有限公司，成为大陆首家赴台投资的股份制商业银行。目前,中信银行总资产超4万亿元人民币，在2015年7月英国《银行家》杂志公布的“世界1000家银行排名”中，中信银行位列一级资本排名第33位，总资产排名第46位；同年5月《福布斯》公布的“全球企业2000强”排名中，中信银行位居第94名，已成为一家资本实力雄厚，具有强大综合竞争力和品牌影响力的国际化金融机构。\n' +
        '\n' +
        '在经济新常态和金融市场化的时代背景下，中信银行以“最佳综合融资服务银行”为发展愿景，充分发挥中信集团金融与实业并举的独特竞争优势，全力打造综合化服务平台，提升中信银行核心竞争力的独特优势。</p>')

    // // 模拟 ajax 异步获取内容
    // onMounted(() => {
    //   setTimeout(() => {
    //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
    //   }, 1500)
    // })

    //工具栏的配置
    const toolbarConfig = {
      excludeKeys: [
        'blockquote', // 引用
        '|',
        'group-more-style', //下拉菜单
        'color', //颜色
        'bgColor', //背景色
        '|',
        'fontSize', //字号
        'fontFamily', //字体
        'lineHeight', //行高
        '|',
        'todo', //待办
        'group-justify', //对齐
        'group-indent', //缩进
        'emotion', // 表情
        'group-video', //视频
        'insertTable', //表格
        'codeBlock', //代码块
        'divider', //分割线
        'undo', //后退
        'redo', //还原
        'fullScreen' //全屏
      ]
    }

    //编辑器的配置
    const editorConfig = {
      placeholder: '',
      scroll: false,
    }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      handleClick() {
        message.info("Button Clicked");
      }
    };
  }
}
</script>

<style>

</style>